;(function($){
    "use strict"

    // 如果需要将插件方法绑定给jq的全局对象
    // $.banner = function(){
    //     console.log("这是全局banner方法")
    // }
    // $.extend({
    //     banner:function(){
    //         console.log("使用jq的extend绑定的全局方法")
    //     }
    // })

    // 将插件功能，绑定给jq的DOM原型，方便将来所有的DOM对象都可以使用该方法
    // $.fn.extend({
    //     banner:function(){
    //         console.log("这是使用jq的fn的extend绑定的DOM的banner方法")
    //     }
    // })

    $.fn.banner = function(data, ops={}){
        const that = this;
        // 1. 处理参数
        let {btns=true,
            list=true,
            autoPlay=true,
            delayTime=2000,
            moveTime=200,
            index=0,
            direct="left",
            listStyle="active"
        } = ops;

        // 防止用户自杀
        if(!btns && !list && !autoPlay){
            // console.log("不能全是false")
            // console.log(console)
            console.error("按钮，分页，自动播放，至少需要有一个")
            return;
        }

        let prev;

        // console.log("这是DOM的banner方法")
        // console.log(data)        
        // console.log(btns, list, autoPlay, delayTime, moveTime, index, direct)        
        // 2. 创建图片结构
        // 创建图片容器，并插入页面
        const imgbox = $("<div class='imgbox'></div>").appendTo(this);
        // 创建图片
        let str = "";
        for(let i=0;i<data.length;i++){
            str += `<a href="${data[i].link}">
                        <img src="${data[i].src}" alt="${data[i].alt}" title="${data[i].title}">
                    </a>`;
        }
        // 将图片插入容器
        imgbox.html(str);
        // 设置指定的图片显示
        imgbox.children("a").eq(index).css({left:0});

        // 3. 左右按钮功能
        if(btns){
            // 创建结构，并绑定点击事件
            $("<div class='btns'></div>").appendTo(this)
            .append($("<button class='left'><i class='iconfont'>&#xe60b;</i></button>"))
            .append($("<button class='right'><i class='iconfont'>&#xe64f;</i></button>"))
            .children(".left").hide().click(leftClick).end()
            .children(".right").hide().click(RightClick);

            // 左按钮的事件处理函数
            function leftClick(){
                // 计算索引
                // ...
                // 开始运动
                // btnMove()
                if(index === 0){
                    index = data.length-1;
                    prev = 0;
                }else{
                    index--;
                    prev = index+1;     
                }
                btnMovo();

            }
            function btnMovo(){
                imgbox.children("a").eq(prev).css({
                    left:0
                }).stop().animate({
                    left:imgbox.children("a").eq(prev).width()
                }, moveTime).end().eq(index).css({
                    left:-imgbox.children("a").eq(prev).width()
                }).stop().animate({
                    left:0
                }, moveTime)
    
                // 修改分页器当前项的样式
                that.find(".list-re").children("span").eq(index).addClass(listStyle).siblings().removeClass(listStyle);
            }
            // 鼠标进入显示按钮，离开隐藏按钮
            this.hover(function(){
                that.find(".left").show()
                that.find(".right").show()
            },function(){
                that.find(".left").hide()
                that.find(".right").hide()
            })
        }

      
        // 右按钮的事件处理函数
        function RightClick(){
            // 计算索引：要走的，要进来的
            if(index === data.length-1){
                index = 0;
                prev = data.length-1;
            }else{
                index++;
                prev = index-1;
            }
            // console.log(prev, index)
            // 开始运动
            btnMove();
        }
        // 运动功能
        function btnMove(){
            imgbox.children("a").eq(prev).css({
                left:0
            }).stop().animate({
                left:-imgbox.children("a").eq(prev).width()
            }, moveTime).end().eq(index).css({
                left:imgbox.children("a").eq(prev).width()
            }).stop().animate({
                left:0
            }, moveTime)

            // 修改分页器当前项的样式
            that.find(".list-re").children("span").eq(index).addClass(listStyle).siblings().removeClass(listStyle);
        }

        // 4. 分页器功能
        if(list){
            // 创建分页器元素
            let str = "";
            for(let i=0;i<data.length;i++){
                str += `<span></span>`;
            }
            // 创建分页器容器
            $("<div class='list-re'></div>")
            // 插入到页面
            .appendTo(this)
            // 将分页器元素插入容器
            .html(str)
            // 设置分页器的当前项的样式
            .children("span").eq(index).addClass(listStyle)
            // 绑定事件
            .end().mouseover(function(){
                // console.log($(this))
                // console.log(index, $(this).index())
                // 判断图片运动的方向：点击的索引和当前索引的大小
                if($(this).index() > index){
                    // console.log("left")
                    // 开始运动：要走的，要进来的，方向
                    listMove(index, $(this).index(), -1)
                }
                if($(this).index() < index){
                    // console.log("right")
                    // 开始运动：要走的，要进来的，方向
                    listMove(index, $(this).index(), 1)
                }
                // 点击之后，当前点击的索引，就是下次要走的索引
                index = $(this).index();
            })

            // 运动功能：要走的，要进来的，方向
            function listMove(prev, index, d){
                imgbox.children("a").eq(prev).css({
                    left:0
                }).stop().animate({
                    left:imgbox.children("a").eq(prev).width() * d
                }, moveTime).end().eq(index).css({
                    left:-imgbox.children("a").eq(prev).width() * d
                }).stop().animate({
                    left:0
                }, moveTime)
                // 修改分页器当前项的样式
                that.find(".list-re").children("span").eq(index).addClass(listStyle).siblings().removeClass(listStyle);
            }
        }

        // 5. 自动播放
        if(autoPlay){
            // 开启计时器
            let t = setInterval(() => {
                // 自动模拟右按钮的点击
                if(direct === "left"){
                    RightClick()
                }else{
                    LeftClick()
                }
            }, delayTime);

            // 鼠标进入容器，清除计时器
            this.hover(function(){
                clearInterval(t)
            },function(){
                // 鼠标离开，重开计时器
                t = setInterval(() => {
                    if(direct === "left"){
                        RightClick()
                    }else{
                        LeftClick()
                    }
                }, delayTime);
            })
        }
    }
})(jQuery);
